import React, { useRef, useState } from 'react';
import { getUserList, switchUserStatus, addUser } from "@/services/user"
import { Button, Avatar, Switch, message } from 'antd';
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import AddUser from "./components/AddUser";
import EditUser from "./components/EditUser";

const Users: React.FC = () => {
  // 表格 ref，便于自定义操作表格
  const actionRef = useRef();

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isEditModalVisible, setIsEditModalStatus] = useState(false);
  const [currentEditUser, setCurrentEditUser] = useState({});

  const columns = [
    {
      title: '头像',
      dataIndex: 'avatar',
      hideInSearch: true,
      // render 函数第一参数为当前表格的值，record 为整列数据
      render: (_, record) => {
        return <Avatar src={record.avatar_url} size={32} icon={<UserOutlined />} />
      }
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '是否禁用',
      dataIndex: 'is_locked',
      hideInSearch: true,
      render: (_, record) => {
        return <Switch
          checkedChildren="启用"
          unCheckedChildren="禁止"
          onChange={() => { onSwitchUserStatus(record.id) }}
          defaultChecked={record.is_locked === 0} />
      }
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      hideInSearch: true,
    },
    {
      title: '操作',
      hideInSearch: true,
      render: (_, record) => {
        return <a onClick={() => { switchEditModalStatus(true, record) }}>编辑</a>
      }
    }
  ];

  const getData = async (params) => {
    const rep = await getUserList(params);

    return {
      data: rep.data,
      success: true,
      total: rep.meta.pagination.total
    }
  }

  const onSwitchUserStatus = async (uid: string | number) => {
    const rep = await switchUserStatus(uid);
    if (rep?.status) {
      message.error("操作失败");
    } else {
      message.success("操作成功");
    }
  }

  const switchAddModalStatus = (status: boolean) => {
    setIsModalVisible(status);
  }

  const switchEditModalStatus = (status: boolean, data) => {
    setIsEditModalStatus(status);
    setCurrentEditUser(data);
  }

  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        request={async (params) => getData(params)}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="用户列表"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => { switchAddModalStatus(true) }}
          >
            新建
          </Button>,
        ]}
      />

      <AddUser
        isModalVisible={isModalVisible}
        setModalStatus={switchAddModalStatus}
        actionRef={actionRef}
      >
      </AddUser>

      <EditUser
        setEditModalStatus={switchEditModalStatus}
        isEditModalVisible={isEditModalVisible}
        actionRef={actionRef}
        data={currentEditUser}
      >
      </EditUser>
    </>
  )
}

export default Users;
